<template>
	<view class="Transaction">
		<app-title title='交易大厅'>
			<template v-slot:titleRight>
				<uni-icons type="plusempty" size="26" color="#333" @click="openModals"></uni-icons>
			</template>
		</app-title>
		<view class="Transaction_box">
			<view class="Transaction_box_tab">
				<view :class="tabIndex === index?'Transaction_box_tab_item flag':'Transaction_box_tab_item'"
					v-for="(item,index) in tabList" :key="index" @click="tabFun(index)">
					{{item}}
				</view>
			</view>
			<view class="Transaction_box_center">
				<scroll-view v-if="list.length !== 0" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y"
					@scrolltolower="lower" @scroll="scroll">
					<view id="demo1" class="scroll-view-item" v-for="(item,index) in list" :key="index">
						<view class="scroll-view-item-left">
							<p style="font-size: 34rpx;font-weight: 550;color: #333;" v-if="tabIndex=== 2">
								{{item.type}}
							</p>
							<p style="font-size: 34rpx;font-weight: 550;color: #333;" v-if="tabIndex !== 2">
								{{item.nickname}}
							</p>
							<p>{{tabIndex === 0?'卖出':tabIndex === 1?'买入':'发起'}}数量：{{item.num}}</p>
							<p>{{tabIndex === 0?'卖出':tabIndex === 1?'买入':'发起'}}时间：{{item.time}}</p>
							<p v-if="item.trade_time !== null">结束时间：{{item.trade_time}}</p>
							<p v-if="item.trade_time !== null">对方电话：{{item.trade_mobile}}</p>
							<p>{{tabIndex === 0?'卖出':tabIndex === 1?'买入':'发起'}}单价：{{item.price}}</p>
						</view>
						<view class="scroll-view-item-right">
							<h5>总值：{{item.real_price}}</h5>
							<view v-if="tabIndex !== 2" class="but" @click="openModal(item.id)">
								{{tabIndex === 0?'购买':'卖出'}}
							</view>
							<view class="but" v-else>
								{{item.status}}
							</view>
						</view>
					</view>
				</scroll-view>
				<uv-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
			</view>
		</view>
		<uv-modal ref="modal" title="温馨提示" :content="`确认${tabIndex === 0?'购买':'卖出'}吗？`" :showConfirmButton='true'
			:showCancelButton='true' @confirm="confirm"></uv-modal>

		<uv-modal ref="modals" title="发布交易" :showConfirmButton='true' :showCancelButton='true'
			@confirm="api_index_to_tradeFun">
			<template>
				<view class="openModals_box">
					<view class="openModals_box_input">
						数量：<input type="number" v-model="num" placeholder="请输入交易数量" />
					</view>
					<view class="openModals_box_radio">
						类型：<radio-group @change="radioChange" class="openModals_box_radio_group">
							<label style="display: flex;" v-for="(item, index) in items" :key="item.value">
								<view>
									<radio :value="item.value" :checked="item.value === current" />
								</view>
								<view>{{item.name}}</view>
							</label>
						</radio-group>
					</view>
				</view>
			</template>
		</uv-modal>
	</view>
</template>

<script>
	import {
		api_index_get_trade_list,
		api_index_trade_buy, //买入
		api_index_trade_sell, //卖出
		api_index_to_trade
	} from '@/api/member.js'
	export default {
		data() {
			return {
				scrollTop: 0,
				tabIndex: 0,
				tabList: [
					'买入大厅',
					'卖出大厅',
					'我的交易'
				],
				page: 1,
				list: [],
				id: '',
				items: [{
					value: '1',
					name: '买单'
				}, {
					value: '2',
					name: '卖单'
				}],
				current: '1',
				num: ''
			};
		},
		onLoad() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_get_trade_listFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		watch: {
			tabIndex() {},

		},
		methods: {
			tabFun(i) {
				this.tabIndex = i;
				this.list = [];
				this.page = 1;
				this.scrollTop = 0;
				this.api_index_get_trade_listFun();
			},
			async api_index_to_tradeFun() {
				let up = {
					openid: this.openid,
					num: this.num,
					type: this.current
				}
				let data = await api_index_to_trade(up);
				if (data.error === 0) {
					this.num = '';
					this.current = '1';
					this.list = [];
					this.page = 1;
					this.api_index_get_trade_listFun();

					this.showinteraction('操作成功');
				}
				console.log(data);

			},
			radioChange(evt) {
				this.current = evt.detail.value
			},
			confirm() {
				if (this.tabIndex === 0) {
					this.api_index_trade_buyFun(this.id);
				} else {
					this.api_index_trade_sellFun(this.id);
				}
			},
			openModal(id) {
				this.id = id;
				this.$refs.modal.open();
			},
			openModals() {
				this.$refs.modals.open();
			},
			async api_index_trade_buyFun(id) {
				let up = {
					openid: this.openid,
					id
				}
				let data = await api_index_trade_buy(up);
				if (data.error === 0) {
					this.list = [];
					this.page = 1;
					this.api_index_get_trade_listFun();

					this.showinteraction('操作成功');
				}
			},
			async api_index_trade_sellFun(id) {
				let up = {
					openid: this.openid,
					id
				}
				let data = await api_index_trade_sell(up);
				if (data.error === 0) {
					this.list = [];
					this.page = 1;
					this.api_index_get_trade_listFun();

					this.showinteraction('操作成功');
				}
			},
			lower: function(e) {
				this.page++;
				this.api_index_get_trade_listFun();
			},
			scroll: function(e) {
				this.scrollTop = e.detail.scrollTop
			},
			async api_index_get_trade_listFun() {
				let up = {
					openid: this.openid,
					page: this.page,
					type: this.tabIndex === 0 ? 2 : this.tabIndex === 1 ? 1 : 3
				}
				let data = await api_index_get_trade_list(up);
				console.log(data);

				if (data.error === 0) {
					data.list.forEach(item => {
						this.list.push(item)
					})
				} else {
					return
				}
			},
			//提示
			showinteraction(title, icon = 'none') {
				uni.showToast({
					title,
					icon,
					duration: 2000,
					mask: false
				})
			},
		}
	}
</script>

<style lang="scss">
	.Transaction {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.Transaction_box {
			width: 100%;
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.Transaction_box_tab {
				width: 100%;
				height: 100rpx;
				display: flex;
				line-height: 100rpx;
				align-items: baseline;
				background-color: #D95B42;
				padding: 30rpx 0;
				box-sizing: content-box;

				.Transaction_box_tab_item {
					color: #fff;
					// width: 200rpx;
					padding: 0 30rpx;
					text-align: center;
				}

				.flag {
					font-size: 50rpx;
				}

			}

			.Transaction_box_center {
				width: 100%;
				flex: 1;
				overflow: auto;
				display: flex;
				align-items: center;
				justify-content: center;

				.scroll-Y {
					height: 100%;

					.scroll-view-item {
						width: 100%;
						// max-height: 300rpx;
						display: flex;
						border-bottom: 2rpx solid #ccc;
						padding: 0 20rpx;

						.scroll-view-item-left {
							width: 70%;
							font-size: 26rpx;
							color: #999;
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							p {
								margin: 10rpx 0;
							}
						}

						.scroll-view-item-right {
							width: 30%;
							font-size: 36rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							padding: 20rpx 0;
							color: #333;

							h5 {
								width: 100%;
								// text-wrap: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.but {
								font-size: 26rpx;
								width: 180rpx;
								height: 60rpx;
								background-color: #D95B42;
								text-align: center;
								line-height: 60rpx;
								color: #fff;
								border-radius: 10rpx;
							}

						}




					}
				}
			}
		}
	}

	.openModals_box {
		width: 100%;

		.openModals_box_input {
			width: 100%;
			display: flex;
			padding: 20rpx;
			box-shadow: 0 0 10rpx #ccc;
			margin: 20rpx 0;
			border-radius: 10rpx;
			align-items: center;

			input {
				font-size: 26rpx;
			}
		}

		.openModals_box_radio {
			width: 100%;
			display: flex;
			padding: 20rpx;
			margin: 20rpx 0;

			.openModals_box_radio_group {
				width: 400rpx;
				display: flex;
				justify-content: space-around;
			}
		}
	}
</style>